<template>
  <el-row class="container">
    <!--头部-->
    <el-col :span="24" class="topbar-wrap">
      <div class="topbar-account topbar-btn">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link userinfo-inner"><img src="../assets/images/forest.png"> 你好，{{sysUserName}}  <i class="iconfont icon-down"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <el-button type="text" @click="changePwd">修改密码</el-button>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-col>
    <aside>
      <div class="topbar-title">
        <span>元通汽车金融管理</span>
      </div>
      <el-menu width="200px" default-active="/order" class="el-menu-vertical-demo" theme="dark" router>
        <template v-for="(item,index) in $router.options.routes" v-if="item.menuShow">
          <el-menu-item v-if="item.leaf&&item.children&&item.children.length&&item.level==1" :index="item.children[0].path" class="el-submenu__title">
            <i :class="item.iconCls"></i>
            <span slot="title">{{item.children[0].name}}</span>
          </el-menu-item>
          <el-menu-item v-else-if="item.leaf&&item.children&&item.children.length&&item.level==2" :index="item.children[0].path" class="el-submenu__title submenuLevelSecond">
            <span slot="title">{{item.children[0].name}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </aside>
    <!--中间-->
    <el-col :span="24" class="main">
      <!--右侧内容区-->
      <section class="content-container">
        <!-- <div class="grid-content bg-purple-light"> -->
        <el-col :span="24" class="content-wrapper">
          <transition name="fade" mode="out-in">
          </transition>
        </el-col>
        <!-- </div> -->
        <router-view class="router-view"></router-view>
      </section>
    </el-col>

    <el-dialog title="修改密码" :visible.sync="changePwdVisiable">
      <el-form :model="form">
        <el-form-item label="原密码" :label-width="formLabelWidth" prop="pass">
          <el-input v-model="form.oldPwd" auto-complete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth" prop="pass">
          <el-input v-model="form.newPwd" auto-complete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="pass">
          <el-input v-model="form.confirmPwd" auto-complete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePwdVisiable = false">取 消</el-button>
        <el-button type="primary" @click="submitPwd">确 定</el-button>
      </div>
  </el-dialog>
  </el-row>
</template>
<script>
import $ from 'jquery'
export default {
  name: 'home',
  data() {
    return {
      formLabelWidth:'120px',
      changePwdVisiable:false,
      msgCount:0,
      sysUserName: '',
      sysUserAvatar: '',
      form:{oldPwd:'',newPwd:'',confirmPwd:''}
    }
  },

  methods: {
    handleOpen() {
      //console.log('handleopen');
    },
    handleClose() {
      //console.log('handleclose');
    },

    changePwd(){
       this.changePwdVisiable=true
       this.form.newPwd=''
       this.form.oldPwd=''
       this.form.confirmPwd = ''
    },
    submitPwd(){
       let that = this
       var content = {}
       content.newPassword=this.form.newPwd
       content.oldPassword=this.form.oldPwd
       if(this.form.newPwd!=this.form.confirmPwd){
        this.$message("密码不一致")
       }else{
        this.$http.post('/staff/editPassword',content)
        .then((res)=>{
         if(res.data.success){
          this.$message("密码修改成功")
          that.$router.push('/login');
          this.$http.get('/logout');
         }
        })
        .catch((error)=>{
         console.log(error)
        })
       }
    },

    logout() {

      var _this = this;
      this.$confirm('确认退出吗?', '提示', {
        //type: 'warning'
      }).then(() => {
        this.$store.state.token = '';
        sessionStorage.removeItem('access-user');
        sessionStorage.removeItem('token');
        sessionStorage.removeItem('power');
        sessionStorage.removeItem('staffId')
        sessionStorage.removeItem('userName')
        sessionStorage.removeItem('companyNo')
        _this.$router.push('/login');
        this.$http.get('/logout');
      }).catch(() => {

      });
    },

    menu(){
      let that = this
      var menuList = []
      menuList=sessionStorage.getItem("menuList").split(",")
      $.each(menuList,function(index,menu){
        $.each(that.$router.options.routes,function(index,route){
          $.each(route.children,function(index,child){
            console.log(child.path)
            if(menu==child.path){
              console.log(child.path)
              route.menuShow=true
            }
          })
        })
      })
    }
  },

  mounted() {
    var user = sessionStorage.getItem('userName');
    if (user) {
      this.sysUserName = user;
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.container {
  overflow: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  .topbar-wrap {
    height: 50px;
    line-height: 50px;
    background: #FFF;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 200px;
    padding-right: 200px;
    .topbar-logo {
      float: left;
      text-align: center;
      width: 49px;
      border-right: 0px solid #000;
      line-height: 26px;
    }
    .topbar-account {
      float: right;
      padding-right: 12px;
    }
    .userinfo-inner {
      cursor: pointer;
      padding-left: 10px;
      img {
        width: 40px;
        height: 40px;
        border-radius: 20px;
        margin: 5px 0px 5px 5px;
        float: left;
      }
    }
  }
  .main {
    position: absolute;
    top: 50px;
    left: 200px;
    bottom: 0px;
    right: 0px;
    padding-right: 200px;
    background: #F7F7F7;
    .content-container {
      position: relative;
      height: 100%;
      .router-view {
        height: 100%;
      }
    }
  }
  aside {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 0;
    .el-menu-vertical-demo {
      text-align:center;
      width: 200px;
      min-height: 400px;
      height: 100%;
      .submenuLevelSecond {
        background-color: #1F2D3D;
        text-align: center;
      }
    }
    .menu-toggle {
      background: #324157;
      text-align: center;
      color: white;
      height: 26px;
      line-height: 30px;
      cursor: pointer;
    }
    .topbar-title {
      background: #324157;
      text-align: center;
      width: 100%;
      border-right: 0px solid #000;
      font-size: 16px;
      padding: 30px 0px;
      color: #fff;
    }
  }
}

</style>
